<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、背景</h2>
  <div>当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显示效果却有很大差异。这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念</div>
  <h2>二、介绍</h2>
  <div>px是一个相对单位，相对的是设备像素（device pixel）.一般情况，页面缩放比为1，1个CSS像素等于1个设备独立像素</div>
  <br>
  <div>px会受到下面的因素的影响而变化：</div>
  <ul>
    <li>每英寸像素（PPI）</li>
    <li>设备像素比（DPR）</li>
  </ul>
  <br>
  <div>设备像素:pt</div>
  <br>
  <div>设备独立像素：通过window.screen.width/ window.screen.height 查看</div>
  <br>
  <div>比如我们会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏，我们把它调为 1440x900”，这里的“分辨率”（非严谨说法）指的就是设备独立像素</div>
  <br>
  <div>设备像素比:dpr.在JavaScript中可以通过 window.devicePixelRatio 获取</div>
  <br>
  <div>ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像</div>
  <h2>三、总结</h2>
  <div>无缩放情况下，1个CSS像素等于1个设备独立像素</div>
  <br>
  <div>设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变</div>
  <br>
  <div>PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）</div>
  <br>
  <div>在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素</div>
  <br>
  <div>设备像素比（dpr） = 设备像素 / 设备独立像素</div>
  <br>
  <div>每英寸像素（ppi），值越大，图像越清晰</div>
</body>
</html>